<template>
  <div class="table-box">
    <div class="content-box" v-if="isShow">
      <ProTable row-key="courseId" ref="proTable" :columns="columns" :requestApi="GetCourseList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="handleAdd">新建课程</el-button>
        </template>
        <!-- 课程主图 -->
        <template #courseCover="scope">
          <el-image style="width: 60px; height: 60px" :src="scope.row.courseCover" fit="cover" />
        </template>
        <!-- 菜单操作 -->
        <template #operation="scope">
          <div class="flex justify-center">
            <!-- <el-button type="primary" link :icon="EditPen" @click="handleAdd(scope.row, 'edit')">详情</el-button> -->
            <el-button type="primary" link :icon="EditPen" @click="handleAdd(scope.row, 'edit')">修改</el-button>
            <el-button type="primary" link :icon="EditPen" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </ProTable>
      <!-- 新建课程 -->
      <Add ref="addRef"></Add>
    </div>
  </div>
</template>

<script setup lang="ts" name="eduadmin">
import { ref, onMounted } from "vue";
import { GetCourseList, DeleteCourse } from '@/api/modules/service'
import { CirclePlus, EditPen } from "@element-plus/icons-vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from '@/components/ProTable/index.vue'
import Add from './modules/Add.vue'

const isShow = ref<boolean>(true)
const proTable = ref()
// 表格配置项
const columns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'courseId', label: 'ID', width: 100,
    search: {
      el: 'input',
      key: 'courseId',
    }
  },
  { prop: 'courseCover', label: '课程主图', width: 120 },
  { prop: 'courseName', label: '课程名称', search: { el: 'input', key: 'courseName' } },
  { prop: 'arrangeCount', label: '班级总数', width: 100 },
  { prop: 'remark', label: '备注（仅平台可见）', search: { el: 'input', key: 'remark' } },
  { prop: 'createdAt', label: '创建时间' },
  { prop: 'operation', label: '操作', width: 220, fixed: 'right' }
];
/** 添加课程 */
const addRef = ref()
function handleAdd(rowData: Partial<any> = {}, type = 'add') {
  const params = {
    rowData: { ...rowData, semesterId: proTable.value?.searchParam.semesterId },
    getTableList: proTable.value.getTableList,
  }
  addRef.value.acceptParams(params, type);
}
/** 删除 */
async function handleDelete(rowData: Partial<any> = {}) {
  await useHandleData(DeleteCourse, { courseId: rowData.courseId }, '删除该课程')
  proTable.value?.resetTableList();
}
onMounted(() => {
})
</script>
<style lang='scss' scoped>
.sale-flex {
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin-right: 10px;
  }

  :deep(.el-switch) {
    &.is-disabled {
      opacity: 1;

      .el-switch__core {
        cursor: pointer !important;
      }
    }
  }
}
.el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>